<template>
  <div v-if="visible">
    <el-form label-width="80px" class="mt-20 mr-10 p-10" label-position="top">
      <el-row>
        <el-col :span="24">
          <template v-if="activeData.__config__.tag === 'pm-test'">
            <el-form-item label="URL">
              <el-input
                v-model="activeData.extConfig.test"
                placeholder="测试配置项"
                clearable
              />
            </el-form-item>
            <!-- <el-form-item label="绑定变量测试">
            <VW v-model="activeData.datasource.test">
              <el-input v-model="activeData.datasource.test" placeholder="test"  />
            </VW>
          </el-form-item> -->
            <el-form-item label="选择页面资源">
              <FormViewSelector
                class="w-100p"
                placeholder="页面资源"
                :tag="activeData.__config__.tag"
                :view-id.sync="activeData.__config__.viewId"
                :view-code.sync="activeData.__config__.viewCode"
                :show-form-option="true"
              />
            </el-form-item>
            <el-divider style="margin: 10px 0px" />
            <ComponentDataSource :key="activeData" :active-data="activeData" />
            <el-divider style="margin: 10px 0px" />

            <el-form-item label="图标选择">
              <el-input
                v-model="activeData['icon']"
                placeholder="请输入图标名称"
              >
                <el-button
                  slot="append"
                  icon="el-icon-thumb"
                  @click="openIconsDialog('icon')"
                  >选择</el-button
                >
              </el-input>
            </el-form-item>
          </template>
        </el-col>
      </el-row>
      <template v-if="activeData.__config__.tag === 'pm-steps'">
        <!-- <el-form-item label="步骤条数据">
          <div class="form-item-box">
            <section class="control-select">
              <div>
                <div v-for="(item, index) in activeData.extConfig.stepsdata" :key="index" class='widget-step'>
                  <el-popover placement="left" trigger="click" width="250">
                    <el-input slot="reference" v-model="item.title" :key="index">
                      <el-button slot="append" icon="el-icon-remove" @click="removeItem(index)"></el-button>
                    </el-input>
                    <el-form class="form">
                      <el-form-item label="标题" size="mini">
                        <el-input size="mini" v-model="item.title" style="width:200px;"></el-input>
                      </el-form-item>
                      <el-form-item label="描述" size="mini">
                        <el-input size="mini" type="textarea" v-model="item.description"
                          style="width:200px;"></el-input>
                      </el-form-item>
                    </el-form>
                  </el-popover>
                </div>
                <div class="mt-10" style="width: 260px;text-align: center;">
                  <el-button icon="el-icon-circle-plus" type="primary" @click="addItem()">新增步骤条数据</el-button>
                </div>
              </div>
            </section>
          </div>
        </el-form-item> -->

        <el-form-item label="步骤条样式">
          <el-radio v-model="activeData.extConfig.direction" label=""
            >横项</el-radio
          >
          <el-radio v-model="activeData.extConfig.direction" label="vertical"
            >竖向</el-radio
          >
        </el-form-item>

        <el-form-item label="文字是否居中">
          <el-switch v-model="activeData.extConfig.isAlignCenter" />
        </el-form-item>
        <el-form-item label="结束状态">
          <el-select
            v-model="activeData.extConfig.finishStatus"
            placeholder="请选择"
          >
            <el-option
              v-for="item in finishStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否简洁风格">
          <el-switch v-model="activeData.extConfig.isSimple" />
          <el-tooltip
            class="item"
            effect="dark"
            content="设置简洁风格，该条件下 align-center / description / direction / space 都将失效 "
            placement="top"
          >
            <i class="el-icon-info"></i>
          </el-tooltip>
        </el-form-item>
      </template>

      <template v-if="activeData.__config__.tag === 'pm-checklist'">
        <el-form-item label="标题名称">
          <el-input
            size="mini"
            v-model="activeData.extConfig.labelName"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="标题大小">
          <el-input-number
            v-model="activeData.extConfig.checkListSize"
            :min="1"
            :max="32"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="标题颜色">
          <div class="block">
            <el-color-picker
              v-model="activeData.extConfig.checkListColor"
            ></el-color-picker>
          </div>
        </el-form-item>

        <el-form-item label="文字是否居中">
          <el-switch v-model="activeData.extConfig.isAlignCenter" />
        </el-form-item>
        <el-form-item label="标题是否居中">
          <el-switch v-model="activeData.extConfig.isTitleCenter" />
        </el-form-item>
      </template>
      <template v-if="activeData.__config__.tag === 'pm-slider'">
        <el-form-item label="是否双滑块">
          <el-switch v-model="activeData.extConfig.range" />
        </el-form-item>
        <el-form-item label="是否竖向">
          <el-switch v-model="activeData.extConfig.vertical" />
        </el-form-item>
      </template>
      <template v-if="activeData.__config__.tag === 'pm-swipe'">
        <el-form-item label="外边距(margin)">
          <div style="padding: 0 20px">
            <div style="width: 100%">
              <div style="text-align: center">
                <el-input
                  v-model="activeData.extConfig.swipeMarginTop"
                  style="width: 70px"
                ></el-input>
              </div>
            </div>
            <div style="display: flex; justify-content: space-between">
              <el-input
                v-model="activeData.extConfig.swipeMarginLeft"
                style="width: 70px"
              ></el-input>
              <el-input
                v-model="activeData.extConfig.swipeMarginRight"
                style="width: 70px"
              ></el-input>
            </div>
            <div style="width: 100%">
              <div style="text-align: center">
                <el-input
                  v-model="activeData.extConfig.swipeMarginBottom"
                  style="width: 70px"
                ></el-input>
              </div>
            </div>
          </div>
        </el-form-item>
       
       
        <el-form-item label="标题名称">
          <el-input
            size="mini"
            v-model="activeData.extConfig.swipeStr"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="自定义标题位置">
          <el-radio v-model="activeData.extConfig.swipeAlign" label="top"
            >居上</el-radio
          >
          <el-radio v-model="activeData.extConfig.swipeAlign" label="bottom"
            >居下</el-radio
          >
          <el-radio v-model="activeData.extConfig.swipeAlign" label="hide"
            >隐藏</el-radio
          >
        </el-form-item>
        <el-form-item label="风格">
          <el-radio v-model="activeData.extConfig.swipeType" label=""
            >一般</el-radio
          >
          <el-radio v-model="activeData.extConfig.swipeType" label="card"
            >卡片</el-radio
          >
        </el-form-item>
        <el-form-item label="竖向高度" v-if="swipeVerticalFlag">
          <el-input
            size="mini"
            v-model="activeData.extConfig.verticalHeight"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否竖向">
          <el-switch
            v-model="activeData.extConfig.vertical"
            @change="swipeChange"
          />
        </el-form-item>
      </template>

      <el-row>
        <template v-if="activeData.__config__.tag === 'pm-card'">
          <el-form-item label="图片url">
            <el-input v-model="activeData.extConfig.cardUrl"></el-input>
          </el-form-item>
          <el-form-item label="图片标题">
            <el-input v-model="activeData.extConfig.cardtitle"></el-input>
          </el-form-item>
          <el-form-item label="图片宽度">
            <el-input v-model="activeData.extConfig.cardWidth"></el-input>
          </el-form-item>
          <el-form-item label="图片高度">
            <el-input v-model="activeData.extConfig.cardHeight"></el-input>
          </el-form-item>
          <el-form-item label="描述" size="mini">
            <el-input
              type="textarea"
              v-model="activeData.extConfig.carddesc"
            ></el-input>
          </el-form-item>
        </template>
      </el-row>
      <template v-if="activeData.__config__.tag === 'pm-link'">
        <el-form-item label="链接名称">
          <el-input v-model="activeData.extConfig.linkStr"></el-input>
        </el-form-item>
        <el-form-item label="链接地址">
          <el-input v-model="activeData.extConfig.linkHref"></el-input>
        </el-form-item>
        <el-form-item label="链接状态">
          <el-select
            v-model="activeData.extConfig.linkStatus"
            placeholder="请选择"
          >
            <el-option
              v-for="item in linkStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="链接打开方式">
          <el-select
            v-model="activeData.extConfig.linkTarget"
            placeholder="请选择"
          >
            <el-option
              v-for="item in linkTargetOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="对齐方式">
          <el-select
            v-model="activeData.extConfig.linkAlign"
            placeholder="请选择"
          >
            <el-option
              v-for="item in strAlignOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="链接是否禁用">
          <el-switch v-model="activeData.extConfig.linkRead" />
        </el-form-item>
      </template>
      <template v-if="activeData.__config__.tag === 'pm-titles'">
        <el-form-item label="标题名称">
          <el-input v-model="activeData.extConfig.content"></el-input>
        </el-form-item>
        <el-form-item label="字体大小">
          <el-input-number
            v-model="activeData.extConfig.strSize"
            :min="1"
            :max="32"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="字体粗细">
          <el-switch v-model="activeData.extConfig.strWeight" />
        </el-form-item>
        <el-form-item label="字体颜色">
          <div class="block">
            <el-color-picker
              v-model="activeData.extConfig.strColor"
            ></el-color-picker>
          </div>
        </el-form-item>

        <el-form-item label="对齐方式">
          <el-select
            v-model="activeData.extConfig.strAlign"
            placeholder="请选择"
          >
            <el-option
              v-for="item in strAlignOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </template>
      <template v-if="activeData.__config__.tag === 'pm-iconTitles'">
        <div class="title">图标标题</div>
        <div class="box">
          <div class="flex" v-for="(item, index) in titlesList" :key="index">
            <el-form-item label="图标地址" style="margin-right: 10px">
              <el-input v-model="item.url"></el-input>
            </el-form-item>
            <el-form-item label="标题名称">
              <el-input v-model="item.title"></el-input>
            </el-form-item>
            <div @click="titlesDel(index)" class="titlesDelete">
              <i class="el-icon-delete"></i>
            </div>
          </div>
          <div class="titlesAdd" @click="titlesAdd">
            <i class="el-icon-circle-plus-outline"></i>
            增加数据
          </div>
        </div>
        <el-form-item label="内边距(padding)">
          <div style="padding: 0 20px">
            <div style="width: 100%">
              <div style="text-align: center">
                <el-input
                  v-model="activeData.extConfig.titlesPaddingTop"
                  style="width: 70px"
                ></el-input>
              </div>
            </div>
            <div style="display: flex; justify-content: space-between">
              <el-input
                v-model="activeData.extConfig.titlesPaddingLeft"
                style="width: 70px"
              ></el-input>
              <el-input
                v-model="activeData.extConfig.titlesPaddingRight"
                style="width: 70px"
              ></el-input>
            </div>
            <div style="width: 100%">
              <div style="text-align: center">
                <el-input
                  v-model="activeData.extConfig.titlesPaddingBottom"
                  style="width: 70px"
                ></el-input>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="外边距(margin)">
          <div style="padding: 0 20px">
            <div style="width: 100%">
              <div style="text-align: center">
                <el-input
                  v-model="activeData.extConfig.titlesMarginTop"
                  style="width: 70px"
                ></el-input>
              </div>
            </div>
            <div style="display: flex; justify-content: space-between">
              <el-input
                v-model="activeData.extConfig.titlesMarginLeft"
                style="width: 70px"
              ></el-input>
              <el-input
                v-model="activeData.extConfig.titlesMarginRight"
                style="width: 70px"
              ></el-input>
            </div>
            <div style="width: 100%">
              <div style="text-align: center">
                <el-input
                  v-model="activeData.extConfig.titlesMarginBottom"
                  style="width: 70px"
                ></el-input>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="对齐方式">
          <el-select
            v-model="activeData.extConfig.titlesAlign"
            placeholder="请选择"
          >
            <el-option
              v-for="item in strAlignOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="素材库图标">
          <el-input v-model="activeData.extConfig.daima" ></el-input>
        </el-form-item> -->
        <el-form-item label="图标大小" style="width: 180px">
          <el-input
            v-model="activeData.extConfig.titlesIcon"
            label="描述文字"
          ></el-input>
        </el-form-item>
        <el-form-item label="图标与文字距离" style="width: 180px">
          <el-input
            v-model="activeData.extConfig.iconText"
            label="描述文字"
          ></el-input>
        </el-form-item>
        <el-form-item label="自定义数列" style="width: 180px">
          <el-input
            v-model="activeData.extConfig.titlesColumn"
            label="描述文字"
          ></el-input>
        </el-form-item>
        <el-form-item label="格子之间的距离(移动端)" style="width: 180px">
          <el-input
            v-model="activeData.extConfig.titlesGutter"
            label="描述文字"
          ></el-input>
        </el-form-item>
        <el-form-item label="字体大小">
          <el-input-number
            v-model="activeData.extConfig.titlesSize"
            :min="1"
            :max="32"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="圆角">
          <el-input-number
            v-model="activeData.extConfig.titlesRadius"
            :min="1"
            :max="100"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="字体粗细">
          <el-switch v-model="activeData.extConfig.titlesWeight" />
        </el-form-item>
        <el-form-item label="是否显示图标">
          <el-switch v-model="activeData.extConfig.showIcon" />
        </el-form-item>
        <el-form-item label="是否竖向排版">
          <el-switch v-model="activeData.extConfig.isColumn" />
        </el-form-item>
        <el-form-item label="是否显示移动端边框">
          <el-switch v-model="activeData.extConfig.titlesBorder" />
        </el-form-item>
        <el-form-item label="字体颜色">
          <div class="block">
            <el-color-picker
              v-model="activeData.extConfig.titlesColor"
            ></el-color-picker>
          </div>
        </el-form-item>
        <el-form-item label="背景色">
          <div class="block">
            <el-color-picker
              v-model="activeData.extConfig.titlesBgColor"
            ></el-color-picker>
          </div>
        </el-form-item>
      </template>
    </el-form>
    <IconsDialog
      :visible.sync="iconsVisible"
      :current="activeData[currentIconModel]"
      @select="setIcon"
    >
    </IconsDialog>
  </div>
</template>
<script>
import { isNumber } from "lodash";
export default {
  name: "ext-config",
  props: ["activeData"],
  data() {
    return {
      currentIconModel: "",
      iconsVisible: false,
      swipeVerticalFlag: false,
      finishStatusOptions: [
        {
          value: "wait",
          label: "等待",
        },
        {
          value: "process",
          label: "过程",
        },
        {
          value: "finish",
          label: "结束",
        },
        {
          value: "error",
          label: "失败",
        },
        {
          value: "success",
          label: "成功",
        },
      ],
      linkStatusOptions: [
        {
          value: "primary",
          label: "主要链接",
        },
        {
          value: "success",
          label: "成功链接",
        },
        {
          value: "warning",
          label: "警告链接",
        },
        {
          value: "danger",
          label: "危险链接",
        },
        {
          value: "info",
          label: "信息链接",
        },
      ],
      linkTargetOptions: [
        {
          value: "_blank",
          label: "新窗口打开",
        },
        {
          value: "_parent",
          label: "父窗口打开",
        },
        {
          value: "_self",
          label: "相同窗口打开",
        },
        {
          value: "_top",
          label: "整页窗口打开",
        },
      ],

      strcolorOptions: [
        {
          value: "yellow",
          label: "yellow",
        },
        {
          value: "red",
          label: "red",
        },
        {
          value: "blue",
          label: "blue",
        },
        {
          value: "green",
          label: "green",
        },
      ],
      strAlignOptions: [
        {
          value: "center",
          label: "居中",
        },
        {
          value: "left",
          label: "居左",
        },
        {
          value: "right",
          label: "居右",
        },
      ],
      titlesList: [
        {
          url: "",
          title: "",
        },
      ],
    };
  },
  computed: {
    visible() {
      //仅在选中组件有 __ext__属性时显示该配置面板
      return this.activeData && this.activeData.__ext__;
    },
  },
  watch: {
    activeData: {
      deep: true,
      handler(val) {
        console.log(val, "activeData===");
      },
    },
    titlesList: {
      deep: true,
      handler(val) {
        console.log(val, "option");
      },
    },
  },
  methods: {
    titlesAdd() {
      this.titlesList.push({
        url: "",
        title: "",
      });
    },
    titlesDel(index) {
      this.titlesList.splice(index, 1);
    },
    addItem() {
      let str = "步骤" + (this.activeData.extConfig.stepsdata.length + 1);
      this.activeData.extConfig.stepsdata.push({
        title: str,
        description: str,
        icon: "",
      });
      console.log(
        this.activeData.extConfig.stepsdata,
        typeof this.activeData.extConfig.stepsdata
      );
    },
    removeItem(index) {
      this.activeData.extConfig.stepsdata.splice(index, 1);
    },
    openIconsDialog(model) {
      this.iconsVisible = true;
      this.currentIconModel = model;
    },
    setIcon(val) {
      this.activeData[this.currentIconModel] = val;
    },
    swipeChange() {
      if (this.activeData.extConfig.vertical) {
        this.swipeVerticalFlag = true;
      } else {
        this.swipeVerticalFlag = false;
      }
    },
    change() {
      console.log(this.activeData.extConfig.daima);
    },
  },
};
</script>
<style lang="scss" scoped>
// .el-input {
//   display: block;
//   width: 182px;
// }
.el-textarea__inner {
  width: 55%;
}
.flex {
  display: flex;
  padding: 10px 10px 0 10px;
}
.box:hover {
  background-color: #efefef;
}
.box {
  padding-bottom: 10px;
  border-top: 1.5px solid #efefef;
  border-bottom: 1.5px solid #efefef;
}
.titlesAdd {
  margin-left: 10px;
  color: #409eff;
  font-weight: 500;
  font-size: 10px;
  cursor: pointer;
}
.title {
  font-weight: 500;
  font-size: 14px;
  color: #5a5959;
}
.titlesDelete {
  cursor: pointer;
}
</style>
